<template>
  <section id="user-control">
    <section class="btn-list" ref="btnList">
      <a-button @click="visibleaddUser=true">
        <svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="24" cy="12" r="8" fill="none" stroke="#98A6AD" stroke-width="3" stroke-linecap="round"
                  stroke-linejoin="round"/>
          <path d="M42 44C42 34.0589 33.9411 26 24 26C14.0589 26 6 34.0589 6 44" stroke="#98A6AD" stroke-width="3"
                stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M19 39H29" stroke="#98A6AD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M24 34V44" stroke="#98A6AD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <p>添加用户</p>
      </a-button>
      <a-button @click="visibleScreenUser=true">
        <svg width="16" height="16" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
          <g>
            <g>
              <rect fill-opacity="0.01" fill="#FFFFFF" x="0" y="0" width="48" height="48" stroke-width="3" stroke="none"
                    fill-rule="evenodd"/>
              <polygon stroke="#98A6AD" stroke-width="3" fill="none" fill-rule="nonzero" stroke-linejoin="round"
                       points="6 9 20.4 25.8177778 20.4 38.4444444 27.6 42 27.6 25.8177778 42 9"/>
            </g>
          </g>
        </svg>
        <p>筛选用户</p>
      </a-button>
      <a-button>
        <a href="http://119.23.46.241:11900/file/public/批量添加用户模板.xlsx">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8 3.33325V12.6666" stroke="#98A6AD" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12.6666 8L7.99992 12.6667L3.33325 8" stroke="#98A6AD" stroke-linecap="round"
                  stroke-linejoin="round"/>
          </svg>
          <p>下载模版</p>
        </a>
      </a-button>
      <a-button>
        <a-upload-dragger
            v-model:fileList="fileList"
            name="file"
            action="http://119.23.46.241:11900/api/v1/user/batch"
            method="post"
            :headers="uploadHeader"
            @change="handleChange"
            accept=".xls,.xlsx"
        >
          <svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="24" cy="12" r="8" fill="none" stroke="#98A6AD" stroke-width="3" stroke-linecap="round"
                    stroke-linejoin="round"/>
            <path d="M42 44C42 34.0589 33.9411 26 24 26C14.0589 26 6 34.0589 6 44" stroke="#98A6AD" stroke-width="3"
                  stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M19 39H29" stroke="#98A6AD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M24 34V44" stroke="#98A6AD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <p>批量添加</p>
        </a-upload-dragger>
      </a-button>
      <a-button @click="batchDelete">
        <svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="24" cy="12" r="8" fill="none" stroke="#98A6AD" stroke-width="3" stroke-linecap="round"
                  stroke-linejoin="round"/>
          <path d="M42 44C42 34.0589 33.9411 26 24 26C14.0589 26 6 34.0589 6 44" stroke="#98A6AD" stroke-width="3"
                stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M19 39H29" stroke="#98A6AD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <p>批量删除</p>
      </a-button>
    </section>
    <section class="user-list">
      <a-table
          :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange}"
          :data-source="data"
          :loading="isLoading"
          :pagination="false"
          :scroll="{ y: 640 }"
          :rowKey="(record, index) => record.id"
          :class="isEmpty ? '' :'weeky-empty'"
      >
        <a-table-column key="username" title="姓名" data-index="username" align="center"/>
        <a-table-column key="position" title="社团职位" data-index="position" align="center"/>
        <a-table-column key="phone" title="联系电话" data-index="phone" align="center"/>
        <a-table-column key="grade" title="年级" data-index="grade" align="center"/>
        <a-table-column key="login_date" title="登录日期" data-index="login_date" align="center"/>
        <a-table-column key="isLogin" title="状态" data-index="isLogin" align="center">
          <template #default="{ text: tags }">
            <span v-if="tags">
              <a-tag color="blue">活跃</a-tag>
            </span>
            <span v-else>
               <a-tag color="red">离线</a-tag>
            </span>
          </template>
        </a-table-column>
        <a-table-column key="operation" title="操作" data-index="operation" align="center">
          <template #default="{ record }">
            <section class="operation" ref="operation">
              <a-button type="primary" @click="updateUser(record)">更新</a-button>
              <a-button type="primary" danger @click="getDeleteUser(record)">删除</a-button>
            </section>
          </template>
        </a-table-column>
      </a-table>
    </section>
  </section>
  <!--    添加用户-->
  <a-modal v-model:visible="visibleaddUser" :footer="null" :getContainer="$refs.btnList" class="update-user-model"
           :mask="showConfirm" :onCancel="handleCancelAddUserClick">
    <section class="update-user-header">
      <h1>添加用户</h1>
      <h2>add userS</h2>
    </section>
    <section class="update-user-body add-user-body">
      <a-input v-model:value="addUser.username" placeholder="姓名"/>
      <a-select
          v-model:value="addUser.grade"
          label-in-value
          style="width: 268px"
          :options="gradeArr"
      >
      </a-select>
      <a-select
          v-model:value="addUser.position"
          label-in-value
          style="width: 268px"
          :options="positionArr"
      >
      </a-select>
      <a-input v-model:value="addUser.phone" placeholder="联系电话" :maxlength="11" type="number"/>
      <a-input :value="addUser.phone + '@bigdata.com'" placeholder="邮箱" :disabled="true"/>
      <a-input v-model:value="addUser.password" placeholder="密码" type="password"/>
      <a-input v-model:value="addUser.introduce" placeholder="介绍"/>
    </section>
    <section class="update-user-footer">
      <a-button @click="handleCancelAddUserClick">取消</a-button>
      <a-button @click="confirmAddUser" :loading="addUserLoad">确定</a-button>
    </section>
  </a-modal>
  <!--    更新用户-->
  <a-modal v-model:visible="visibleUpdateUser" :footer="null" :getContainer="$refs.btnList" class="update-user-model"
           :mask="showConfirm">
    <section class="update-user-header">
      <h1>更新用户</h1>
      <h2>update userS</h2>
    </section>
    <section class="update-user-body">
      <a-input v-model:value="updateUserObj.username" placeholder="姓名"/>
      <a-select
          v-model:value="updateUserObj.grade"
          label-in-value
          style="width: 268px"
          :options="gradeArr"
      >
      </a-select>
      <a-select
          v-model:value="updateUserObj.position"
          label-in-value
          style="width: 268px"
          :options="positionArr"
      >
      </a-select>
      <a-input v-model:value="updateUserObj.phone" placeholder="联系电话"/>
    </section>
    <section class="update-user-footer">
      <a-button @click="visibleUpdateUser=false">取消</a-button>
      <a-button type="primary" danger @click="visibleConfirmResetPwd=true;showConfirm=false">重置密码</a-button>
      <a-button @click="keepUserInfo" :loading="updateLoad">保存</a-button>
    </section>
  </a-modal>
  <!--  确认重置密码-->
  <a-modal v-model:visible="visibleConfirmResetPwd" :footer="null" width="248px" :getContainer="$refs.btnList"
           class="confirm-reset-pwd-box" style="top: 30%;">
    <section style="text-align: center">
      <h2 class="modal-title">是否确认重置密码</h2>
      <p class="modal-content">点击确认后，不得撤销此操作</p>
    </section>
    <section class="modal-button">
      <a-button type="primary" @click="showConfirm=true;visibleConfirmResetPwd=false">取消</a-button>
      <a-button type="primary" @click="resetUserPwd" :loading="resetLoad">确定</a-button>
    </section>
  </a-modal>
  <!--    删除用户-->
  <a-modal v-model:visible="visibleDeleteUser" :footer="null" :getContainer="$refs.btnList" width="374px">
    <section style="text-align: center">
      <h2 class="modal-title">是否删除用户</h2>
      <p class="modal-content">点击确认后，不得撤销此操作</p>
    </section>
    <section class="modal-button">
      <a-button type="primary" @click="visibleDeleteUser=false">取消</a-button>
      <a-button type="primary" @click="deleteUser" :loading="deleteLoad">确定</a-button>
    </section>
  </a-modal>
  <!--    筛选用户-->
  <a-modal v-model:visible="visibleScreenUser" :footer="null" :getContainer="$refs.btnList" width="100%" :mask="false"
           class="select-user">
    <section style="text-align: center">
      <a-select
          v-model:value="screenArr.position"
          label-in-value
          style="width: 180px"
          :options="positionArr"
      >
      </a-select>
      <a-select
          v-model:value="screenArr.grade"
          label-in-value
          style="width: 180px"
          :options="gradeArr"
      >
      </a-select>
      <a-select
          v-model:value="screenArr.status"
          label-in-value
          style="width: 180px"
          :options="loginStatus"
      >
      </a-select>
    </section>
    <section class="modal-button">
      <a-button type="primary" @click="resetSelect">重置</a-button>
      <a-button type="primary" @click="handleSelectUser">筛选</a-button>
    </section>
  </a-modal>
  <!--  确认批量删除用户-->
  <a-modal v-model:visible="visibleConfirmBatchDelete" :footer="null" width="248px" :getContainer="$refs.btnList"
           class="confirm-reset-pwd-box" style="top: 11%;">
    <section style="text-align: center">
      <h2 class="modal-title">是否确认批量删除用户</h2>
      <p class="modal-content">点击确认后，不得撤销此操作</p>
    </section>
    <section class="modal-button">
      <a-button type="primary" @click="visibleConfirmBatchDelete=false">取消</a-button>
      <a-button type="primary" @click="confirmBatchDelete" :loading="resetLoad">确定</a-button>
    </section>
  </a-modal>
</template>
<script>
import {defineComponent, getCurrentInstance, ref, reactive, toRefs, onMounted, computed, watch} from 'vue'
import $store from "store/index"
import {message} from "ant-design-vue"
import {InboxOutlined} from '@ant-design/icons-vue'

export default defineComponent({
  name: "user",
  setup() {
    const {proxy} = getCurrentInstance()
    let data = ref([]);
    let gradeArr = ref([]);
    let positionArr = ref([]);
    let isLoading = ref(true)
    let visibleUpdateUser = ref(false)
    let visibleConfirmResetPwd = ref(false)
    let visibleDeleteUser = ref(false)
    let visibleConfirmBatchDelete = ref(false)
    let visibleaddUser = ref(false)
    let visibleScreenUser = ref(false)
    let visibleBatchAdd = ref(false)
    let showConfirm = ref(true)
    let updateLoad = ref(false)
    let deleteLoad = ref(false)
    let resetLoad = ref(false)
    let addUserLoad = ref(false)
    let isEmpty = ref(false)
    let updateUserOldObj = {}
    let updateUserObj = reactive({
      userId: "",
      username: "",
      phone: "",
      grade: "",
      position: "",
    })
    let addUser = ref({
      username: "",
      grade: {
        value: 0,
        label: "年级"
      },
      position: {
        value: 0,
        label: "社团职位"
      },
      phone: "",
      email: "",
      password: "",
      introduce: "",
    })
    let loginStatus = ref([{label: "状态", value: 0}, {label: "离线", value: 0}, {label: "活跃", value: 1}])
    let screenArr = reactive({
      position: {label: "社团职位", value: 0},
      grade: {label: "年级", value: 0},
      status: {label: "状态", value: null},
    })
    let getUserId = ref("")
    let uploadHeader = ref({})
    let fileList = ref([])
    let file = ref([])

    watch(visibleUpdateUser, (e) => {
      if (e) {
        proxy.$request(proxy.$getRoute(29).route_method, proxy.$getRoute(29).route_url, {type: 1}).then(res => {
          gradeArr.value = res.data
        })
        proxy.$request(proxy.$getRoute(30).route_method, proxy.$getRoute(30).route_url, {type: 1}).then(res => {
          positionArr.value = res.data
        })
      }
    })
    watch(visibleaddUser, (e) => {
      if (e) {
        proxy.$request(proxy.$getRoute(29).route_method, proxy.$getRoute(29).route_url, {type: 1}).then(res => {
          gradeArr.value = res.data
          gradeArr.value.unshift({
            value: 0,
            label: "年级"
          })
        })
        proxy.$request(proxy.$getRoute(30).route_method, proxy.$getRoute(30).route_url, {type: 1}).then(res => {
          positionArr.value = res.data
          positionArr.value.unshift({
            value: 0,
            label: "社团职位"
          })
        })
      }
    })
    watch(visibleScreenUser, (e) => {
      if (e) {
        proxy.$request(proxy.$getRoute(29).route_method, proxy.$getRoute(29).route_url, {type: 1}).then(res => {
          gradeArr.value = res.data
          gradeArr.value.unshift({
            value: 0,
            label: "年级"
          })
        })
        proxy.$request(proxy.$getRoute(30).route_method, proxy.$getRoute(30).route_url, {type: 1}).then(res => {
          positionArr.value = res.data
          positionArr.value.unshift({
            value: 0,
            label: "社团职位"
          })
        })
      }
    })

    const state = reactive({
      selectedRowKeys: [],
      loading: false,
    });
    const hasSelected = computed(() => state.selectedRowKeys.length > 0);
    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const updateUser = (record) => {
      getUserId.value = record.id
      visibleUpdateUser.value = true
      updateUserObj.userId = record.id
      updateUserObj.username = record.username
      updateUserObj.phone = record.phone
      updateUserObj.grade = {
        value: record.grade_id,
        label: record.grade
      }
      updateUserObj.position = {
        value: record.role_id,
        label: record.position
      }
      updateUserOldObj = {
        userId: updateUserObj.userId,
        username: updateUserObj.username,
        phone: updateUserObj.phone,
        grade: updateUserObj.grade,
        position: updateUserObj.position,
      }
    }
    const resetUserPwd = () => {
      resetLoad.value = true
      proxy.$request(proxy.$getRoute(31).route_method, proxy.$getRoute(31).route_url, {
        id: getUserId.value,
        type: 1
      }).then(res => {
        resetLoad.value = false
        visibleConfirmResetPwd.value = false
        message.success("重置密码成功")
      })
    }
    const keepUserInfo = () => {
      let identical = false
      for (let i in updateUserOldObj) {
        if (typeof updateUserObj[i] == "object") {
          updateUserOldObj[i].value !== updateUserObj[i].value ? identical = true : ''
        } else {
          updateUserOldObj[i] !== updateUserObj[i] ? identical = true : ''
        }
      }
      if (identical) {
        updateLoad.value = true
        proxy.$request(proxy.$getRoute(10).route_method, proxy.$getRoute(10).route_url, {
          user_id: getUserId.value,
          phone: updateUserObj.phone,
          username: updateUserObj.username,
          grade_id: updateUserObj.grade.value,
          roles_id: updateUserObj.position.value
        }).then(res => {
          updateLoad.value = false
          visibleUpdateUser.value = false
          message.success("保存成功")
          isLoading.value = true
          isEmpty.value = false
          data.value = []
          proxy.$request(proxy.$getRoute(34).route_method, proxy.$getRoute(34).route_url, {
            role_id: screenArr.position.value,
            grade_id: screenArr.grade.value,
            is_login: screenArr.status.value
          }).then(res => {
            isLoading.value = false
            data.value = res.data
            if (!data.value.length) isEmpty.value = true
          })
        })
      } else {
        message.warn("请修改用户信息后再保存")
      }
    }
    const getDeleteUser = (record) => {
      getUserId.value = record.id
      visibleDeleteUser.value = true
    }
    const deleteUser = () => {
      deleteLoad.value = true
      proxy.$request(proxy.$getRoute(13).route_method, proxy.$getRoute(13).route_url, {
        user_id: getUserId.value
      }).then(res => {
        deleteLoad.value = false
        visibleDeleteUser.value = false
        message.success("用户删除成功")
        isLoading.value = true
        isEmpty.value = false
        data.value = []
        proxy.$request(proxy.$getRoute(34).route_method, proxy.$getRoute(34).route_url, {
          role_id: screenArr.position.value,
          grade_id: screenArr.grade.value,
          is_login: screenArr.status.value
        }).then(res => {
          isLoading.value = false
          data.value = res.data
          if (!data.value.length) isEmpty.value = true
        })
      })
    }
    const confirmAddUser = () => {
      switch (true) {
        case addUser.value.username == "":
          message.warn("请输入用户名")
          break;
        case addUser.value.grade.value == 0:
          message.warn("请输入年级")
          break;
        case addUser.value.position.value == 0:
          message.warn("请社团职位")
          break;
        case !(/^1[3|4|5|8][0-9]\d{4,8}$/.test(addUser.value.phone)):
          message.warn("请输入正确的联系电话")
          break;
        case !(/^[0-9a-zA-Z]{8,16}$/.test(addUser.value.password)):
          message.warn("请输入8到16位由大小写字母和数字组成的密码")
          break;
        default:
          addUserLoad.value = true
          proxy.$request(proxy.$getRoute(33).route_method, proxy.$getRoute(33).route_url, {
            name: addUser.value.username,
            email: addUser.value.phone + "@bigdata.com",
            phone: addUser.value.phone,
            password: addUser.value.password,
            role: addUser.value.position.value,
            grade_id: addUser.value.grade.value,
            introduce: addUser.value.introduce
          }).then(res => {
            if (res.code === 200) {
              visibleaddUser.value = false
              addUserLoad.value = false
              isLoading.value = true
              isEmpty.value = false
              data.value = []
              proxy.$request(proxy.$getRoute(34).route_method, proxy.$getRoute(34).route_url, {
                role_id: screenArr.position.value,
                grade_id: screenArr.grade.value,
                is_login: screenArr.status.value
              }).then(res => {
                addUser.value = {
                  username: "",
                  grade: {
                    value: 0,
                    label: "年级"
                  },
                  position: {
                    value: 0,
                    label: "社团职位"
                  },
                  phone: "",
                  email: "",
                  password: "",
                  introduce: "",
                }
                isLoading.value = false
                data.value = res.data
                visibleScreenUser.value = false
                if (!data.value.length) isEmpty.value = true
                message.success("添加用户成功")
              })
            } else {
              message.warn(res.msg)
              addUserLoad.value = false
            }
          })
      }
    }
    const handleCancelAddUserClick = () => {
      addUser.value = {
        username: "",
        grade: {
          value: 0,
          label: "年级"
        },
        position: {
          value: 0,
          label: "社团职位"
        },
        phone: "",
        email: "",
        password: "",
        introduce: "",
      }
      visibleaddUser.value = false
    }
    const handleSelectUser = () => {
      isLoading.value = true
      isEmpty.value = false
      data.value = []
      proxy.$request(proxy.$getRoute(34).route_method, proxy.$getRoute(34).route_url, {
        role_id: screenArr.position.value,
        grade_id: screenArr.grade.value,
        is_login: screenArr.status.value
      }).then(res => {
        isLoading.value = false
        data.value = res.data
        visibleScreenUser.value = false
        if (!data.value.length) isEmpty.value = true
      })
    }
    const resetSelect = () => {
      screenArr.position = {label: "社团职位", value: 0}
      screenArr.grade = {label: "年级", value: 0}
      screenArr.status = {label: "状态", value: null}
      isLoading.value = true
      isEmpty.value = false
      data.value = []
      proxy.$request(proxy.$getRoute(34).route_method, proxy.$getRoute(34).route_url, {
        role_id: screenArr.position.value,
        grade_id: screenArr.grade.value,
        is_login: screenArr.status.value
      }).then(res => {
        isLoading.value = false
        data.value = res.data
        visibleScreenUser.value = false
        if (!data.value.length) isEmpty.value = true
      })

    }
    const batchDelete = () => {
      if (!state.selectedRowKeys.length) {
        message.warn("请选择批量删除的用户")
      } else {
        visibleConfirmBatchDelete.value = true
      }
    }
    const confirmBatchDelete = () => {
      let deleteUserStr = ''
      state.selectedRowKeys.forEach(x => {
        deleteUserStr += x + ","
      })
      resetLoad.value = true
      proxy.$request(proxy.$getRoute(35).route_method, proxy.$getRoute(35).route_url, {
        user_id: deleteUserStr.slice(0, -1)
      }).then(res => {
        resetLoad.value = false
        visibleConfirmBatchDelete.value = false
        isLoading.value = true
        isEmpty.value = false
        data.value = []
        state.selectedRowKeys = []

        proxy.$request(proxy.$getRoute(34).route_method, proxy.$getRoute(34).route_url, {
          type: 1,
          role_id: screenArr.position.value,
          grade_id: screenArr.grade.value,
          is_login: screenArr.status.value
        }).then(res => {
          isLoading.value = false
          data.value = res.data
          if (!data.value.length) isEmpty.value = true
          message.success("批量删除成功")
        })
      })
    }
    const handleChange = (file) => {
      if (file.fileList[0].status == "done") {
        message.success("批量添加用户成功")
        isLoading.value = true
        isEmpty.value = false
        data.value = []
        proxy.$request(proxy.$getRoute(34).route_method, proxy.$getRoute(34).route_url, {
          role_id: screenArr.position.value,
          grade_id: screenArr.grade.value,
          is_login: screenArr.status.value
        }).then(res => {
          isLoading.value = false
          data.value = res.data
          visibleScreenUser.value = false
          if (!data.value.length) isEmpty.value = true
        })
      }
    }

    onMounted(() => {
      proxy.$request(proxy.$getRoute(34).route_method, proxy.$getRoute(34).route_url, {
        role_id: screenArr.position.value,
        grade_id: screenArr.grade.value,
        is_login: screenArr.status.value
      }).then(res => {
        isLoading.value = false
        data.value = res.data
        if (!data.value.length) isEmpty.value = true
      })
      setInterval(() => {
        isLoading.value = true
        isEmpty.value = false
        data.value = []
        proxy.$request(proxy.$getRoute(34).route_method, proxy.$getRoute(34).route_url, {
          type: 1,
          role_id: screenArr.position.value,
          grade_id: screenArr.grade.value,
          is_login: screenArr.status.value
        }).then(res => {
          isLoading.value = false
          data.value = res.data
          if (!data.value.length) isEmpty.value = true
        })
      }, 30000)
      let token = $store.state.token
      uploadHeader.value = {
        Authorization: token
      }

    })

    return {
      data,
      hasSelected,
      ...toRefs(state),
      isLoading,
      isEmpty,
      onSelectChange,
      visibleUpdateUser,
      visibleConfirmResetPwd,
      visibleDeleteUser,
      visibleaddUser,
      visibleScreenUser,
      visibleBatchAdd,
      showConfirm,
      gradeArr,
      positionArr,
      updateUser,
      updateUserObj,
      keepUserInfo,
      updateLoad,
      deleteLoad,
      resetLoad,
      addUserLoad,
      getDeleteUser,
      deleteUser,
      resetUserPwd,
      addUser,
      loginStatus,
      handleCancelAddUserClick,
      handleSelectUser,
      confirmAddUser,
      screenArr,
      resetSelect,
      batchDelete,
      visibleConfirmBatchDelete,
      confirmBatchDelete,
      fileList,
      uploadHeader,
      handleChange
    }
  },
  components: {
    InboxOutlined,
  },
})
</script>

<style lang="less">
@selectColor: #6777EF;
#user-control {
  .btn-list {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
  }

  .btn-list > button {
    display: flex;
    align-items: center;
    width: 106px;
    height: 52px;
    border-radius: 6px;
    border: none;
    background: #fff;
    box-shadow: none;
  }

  .btn-list > button:nth-child(3) a {
    display: flex;
    align-items: center;
  }

  .btn-list > button p {
    margin: 0 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 20px;
    letter-spacing: 0.5px;
  }

  .user-list {
    border-radius: 8px;
    overflow: hidden;
  }

  .ant-table-thead > tr > th, .ant-table-header {
    font-size: 16px;
    font-weight: 400;
    color: #98A6AD;
    line-height: 19px;
    background: #fff !important;
  }

  .ant-table-tbody > tr > td {
    border: none;
  }

  .ant-table-body {
    overflow-y: auto !important;
  }

  .ant-table {
    font-size: 16px;
    font-weight: 400;
    color: #262626;
    line-height: 19px;
    white-space: nowrap;
  }

  .user-list .ant-checkbox-indeterminate .ant-checkbox-inner::after {
    background: @selectColor;
  }

  .user-list .ant-checkbox-checked .ant-checkbox-inner {
    border-color: @selectColor;
    background: @selectColor;
  }

  .operation {
    display: flex;
    gap: 10px;
  }

  .operation button, .btn-list .ant-modal-body button {
    width: 74px;
    height: 36px;
    border-radius: 8px;
    font-size: 13px;
    letter-spacing: 0;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 15px;
  }

  .operation button:first-child, .btn-list .ant-modal-body button:first-child {
    background: #6777EF;
  }

  .operation button:last-child, .btn-list .ant-modal-body button:last-child {
    background: #EB5757;
  }

  .update-user-model {
    width: 332px !important;
    height: 420px;
    box-sizing: border-box;
  }

  .update-user-model .ant-modal-body > section {
    width: 100%;
  }

  .update-user-model .update-user-header h1 {
    font-size: 32px;
    font-weight: bold;
    color: #000000;
    line-height: 38px;
    margin-bottom: 2px;
    text-align: left;
  }

  .update-user-model .update-user-header h2 {
    font-size: 14px;
    font-weight: bold;
    color: #D9D9D9;
    line-height: 14px;
    text-transform: uppercase;
    text-align: left;
  }

  .update-user-model .update-user-body {
    margin-top: 20px;
    height: 210px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }

  .update-user-model .update-user-body input,
  .update-user-model .update-user-body .ant-select-selector {
    width: 268px;
    height: 40px;
    background: rgba(207, 207, 207, 0.1);
    border-radius: 6px 6px 6px 6px;
  }

  .update-user-model .ant-select-selection-item {
    text-align: left;
    line-height: 38px;
  }

  .update-user-model .update-user-footer {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
  }

  .update-user-model .update-user-footer button {
    height: 36px;
    padding: 7px 18px;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 22px;
    border: none;
  }

  .update-user-model .update-user-footer button:first-child {
    background: #F2F3F5;
    color: #000;
  }

  .update-user-model .update-user-footer button:nth-child(2) {
    width: 85px;
  }

  .update-user-model .update-user-footer button:last-child {
    background: #6777EF;
  }

  .add-user-body {
    height: 400px !important;
  }

  .confirm-reset-pwd-box .modal-title {
    font-size: 16px;
    font-weight: bold;
    color: #262626;
    line-height: 24px;
  }

  .confirm-reset-pwd-box .modal-content {
    font-size: 14px;
    font-weight: 400;
    color: #262626;
    line-height: 22px;
    white-space: nowrap;
  }

  .ant-table-body::-webkit-scrollbar {
    width: 10px;
  }

  //修改 滚动条的 下面 的 样式
  .ant-table-body::-webkit-scrollbar-track {
    background-color: transparent;
  }

  //修改 滑块
  .ant-table-body::-webkit-scrollbar-thumb {
    width: 5px !important;
    background-color: #bbbdbf;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }

  .ant-input::-webkit-outer-spin-button,
  .ant-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }


  .select-user .ant-modal-content {
    position: absolute;
    left: 21%;
    top: 95px;
    width: 200px;
  }

  .btn-list .ant-modal-root .ant-modal-close {
    display: none;
  }

  .select-user .ant-modal-body {
    padding: 15px;
  }

  .select-user .modal-button {
    justify-content: space-between;
  }

  .select-user .modal-button button {
    width: 70px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
  }

  .select-user .modal-button button:last-child {
    background: @selectColor;
    color: #fff;
  }

  .select-user .modal-button button:first-child {
    background: #fff;
    border: 1px solid #d9d9d9;
    box-shadow: 0 2px #00000004;
    color: #000;
  }

  .select-user .ant-modal-body > section:first-child {
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }

  .weeky-empty .ant-empty {
    display: none !important;
  }

  .weeky-empty .ant-table-placeholder {
    height: 100px;
  }

  .btn-list .ant-upload {
    border: none;
    background: none;
  }

  .btn-list .ant-upload-drag-container {
    display: flex;
  }

  .btn-list .ant-upload-list {
    display: none;
  }
}
</style>
